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Hello there! 


• I’m DB 

• Web developer 

• Open sorcerer & core 
committer for Lektor 

• Python & JavaScript 

• Contractor available for hire: 
davidbaumgold.com 




Let's talk about 

the web. 


There are two different 
kinds of websites: 



In the beginning 



GeoCities * 


Static Site 


• Write HTML files 

• Upload those files to the server 

• Server sends those hies to website visitors 







But I want my website 
to display the current 

date and time! 


Dynamic Site 

• Write code that produces HTML 

• Upload that code to the server 

• When someone visits the website, run that code to get HTML 

• Server sends the HTML to website visitors 



I need a guest book! 

And my site 
needs to send emails! 


Dynamic Site 





Uh oh, things are 
getting slow. 
Let's use a cache! 


Dynamic Site 






The Rise of the CMS 



and many, many others . . . 


Dynamic Sites 

Pros Cons 


Users can sign up and 
interact with other users: 
posting comments, etc 

Admin site: log in and 
write blog posts! 

Simple for non-techies to 
create content 


• Complicated to get 
running 

• Potential security 
vulnerabilities 

• Scaling issues: very 
expensive! 

• Occasional downtime 


The Rise of JavaScript 


Browsers got much faster 

Front-end frameworks: 
Backbone, Angular, Ember, 
Meteor, React, etc 

Single-Page Applications 

Communicate with servers 

via JSON APIs, not HTML 



Dynamic Site 




Static Site 






Static Sites 

Pros Cons 


Simple to create and run 

Super cheap 

Incredibly scalable 

Effectively impervious to 
security issues 


• Updating multiple pages 
tedious and error-prone! 

• No dynamic content for 
users! 

• No admin site: admins 
have to write HTML 
directly! 


How cheap are we 
talking about, here? 


Example 


Let’s say we have a popular website that 
consistently gets 1 00 requests every second 

What would be the monthly cost if we made 
static website and hosted it on Amazon S3? 


Total requests in one month: 


100 x 60 x 60 x 24 x 30 = 

259,200,000 req/month 


S3 price for GET requests: 


$0,004 per 10,000 requests 


Total price: 


$103.68 per month 

for steady 100 hits/sec 


Can we get the 
best of both worlds? 



Static Site Limitations 


1 . Updating multiple pages is tedious & error-prone 

2. No dynamic content for users 

3. No admin site: admins have to write HTML to 
add new content to the website 


Updating multiple pages? 


Use a template! 


But static files means no server-side templates. . . 


Use client-side templates! 


But I like Python! 


Use pre -processor templates! 


Dynamic templates: upload code to server, 
create HTML on every web request 



Pre-processor templates: 

create HTML from code once , upload HTML to server 





Static Site Generators 



and many, many others . . . 


Static Site Generators 


Define templates for your pages 

Updating the footer across your entire site? 
Make one change and re-render! 


Works with CSS pre -processors (Sass, Less) 
Works with JS pre-processors (webpack, r.js) 


Static Site Limitations 


1. Updating multiple pages is tedious & error - prone 

2. No dynamic content for users 

3. No admin site: admins have to write HTML to 
add new content to the website 


Dynamic Content 


What dynamic content do you actually need? 

A surprising amount of dynamic content can 
be replaced with dynamic services . 


Dynamic Content 

Do you run your own analytics? 

Most people use Google Analytics 

Drop a <script> tag on the page, 
view the results on Google’s website 

That’s a service! You never handle the data! 


Comments 


2 Comments David Baumgold 


Q singingwolfboy ▼ 


V Recommend Share 


Sort by Best ▼ 



Join the discussion... 



Joey 1 2 days ago 

Will visiting the bare domain with HTTPS still perform the redirect? 
/s v • Reply • Share > 



singingwolfboy EE)'* Joey • 12 days ago 


Yep! Having both versions of the domain in the certificate (with the "www" and without) means that the 
certificate will still be valid if you try to visit the bare domain over HTTPS. Route 53 makes bare domain 
requests go to the second CloudFront distribution you've created, which forwards requests to the second 
S3 bucket you've created, and that S3 bucket is configured to redirect all requests to the "www" version of 
your website. So everything should work smoothly! 

^ v • Edit • Reply • Share > 


disqus.com 



Mailing List 

Head First Git mailing list 

Email Address 


Subscribe 


mailchimp. com 



Complex Forms 


Contact Me 

Message: 


Your Email Address: 


Send Message 



wufoo.com 





Search 



algolia.com 


Full User Accounts 


© Stormpath 

stormpath.com 


Other Popular APIs 


Dropbox API 

Google Drive API 

Amazon S3 
(upload & download) 


• Stripe.js API 

• FacebookAPI 

• Twitter API 

• Google AdSense 


and many, many others . . . 


Or build your own! 


(This is what 
“microservices” 
are all about) 


Static Site Limitations 


1. Updating multiple pages is tedious & error - prone 



No dynamic content for users 

No admin site: admins have to write HTML to 
add new content to the website 









Static website generator 

WITH 

a dynamic admin site 


Mind. Blown. 


Project Structure 


Models: define the types of pages on your site 
(blog post, photo gallery, resume, etc) 

Content: define the content of individual pages 
(landing page copy, photos & captions, etc) 

Templates : render content into HTML 


models/page.ini 


[model] 
name = Page 

[fields .title] 
label = Title 
type = string 

[fields . body] 
label = Body 
type = markdown 



con ten t/content s .lr 


title: Welcome! 
body: 

Welcome to my *awesome* website! 



templates/page.html 


cldoctype html> 

<head> 

<title> [ this. title ] </title> 
</head> 

<body> 

<hl> this. title }}</hl> 

{{ this. body }} 

</body> 



Result 


<!doctype html> 


<head> 


<title>Welcome ! </title> 


</head> 


<body> 


<hl>Welcome ! </hl> 


<p>Welcome to my <em>awesome</em> 

website!</p> 


</body> 



Automatically renders Markdown! 


$ LEKTOR SERVER 


This is where the magic happens. . . 






Page Actions 

i 

Edit 



Edit "Welcome!" 

Title 


Preview 

Reveal in Finder 
Add Page 
Add Attachment 


Welcome! 

IF 

Body 


Welcome to my *awesome* website! 



No attachments 


















Page Actions 

i 

Edit 



Preview 

Reveal in Finder 
Add Page 
Add Attachment 


Subpages 


About this Website 

Blog 

Projects 


Attachments 


No attachments 


Edit "Different title" 


► System Fields 


Save Changes 


Q 

Ck 


<9> 



1 27.0.0.1 :5000/admin/root/edit 















Edit 


Preview 


Reveal in Finder 
Add Page 
Add Attachment 


Subpages 


About this Website 

Blog 

Projects 


Attachments 


No attachments 


Lektor Blog Quickstart 

Welcome Bloa Projects About 
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A STATIC-SITE CMS 


https:/ / getlektor.org 


Any Questions? 


David Baumgold 
@singingwolfboy 



HELP US IMPROVE! 

PLEASE USE THE 
SURVEY APP TO SEND 
US FEEDBACK. 


loneconf.sixfeetuD.com 
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